<template>
  <div
    class=''
    v-if='detailData'
  >
    <div class='order-info'>
      <div>
        <span>单号：</span>
        {{detailData.OrderMain.DB_DanHao}}
      </div>
      <div>
        <span>日期：</span>
        {{detailData.OrderMain.DB_LuRuRiQiStr}}
      </div>
      <div>
        <span>客户：</span>
        {{detailData.OrderMain.KHname}}
      </div>
      <div>
        <span>账户：</span>
        {{detailData.OrderMain.WEBAccount}}
      </div>
      <div>
        <span>地址：</span>
        {{detailData.OrderMain.DB_address}}
      </div>
      <div
        class='wuliu'
        @click='btnAnClick'
        v-if='detailData.WuLiu.length'
      >
        <span>物流：</span>
        <div>
          {{detailData.WuLiu[0].nRemark}} <i
            :class="[isShow?'top-t':'bottom-t']"
            class='iconfont icon-qianjin '
          ></i>
        </div>

      </div>
    </div>

    <div v-show='isShow'>
      <ul class="figure mgt">
        <li
          :class="[index==0?'to-date':'']"
          v-for="(item,index) in detailData.WuLiu"
          :key="index"
        >
          <div class="i-wrap">
            <div
              class="post"
              v-if="index!=0"
            ></div>
            <div class="basic-point">
              <div class="basic-point-info">
                <div>{{item.nRemark}}</div>
                <div>{{item.rDateStr }}{{item.PSY_Name}}</div>

              </div>
            </div>
          </div>
        </li>

      </ul>
    </div>
    <ul
      class='goods-list'
      :style="{marginTop:'20rpx'}"
      v-if='detailData.OrderProducts.length'
    >
      <li
        v-for="(items,indexs) in detailData.OrderProducts"
        :key='indexs'
      >
        <div class='content'>
          <div class='lf-img'>
            <img
              :src="items.SP_picture"
              mode="widthFix"
              alt=""
            >
          </div>
          <div class='rt-goodsInfo'>
            <div>[{{items.HuoHao}}] {{items.SPMingCheng}}</div>
            <div class='goods-type'>
              报价类型:{{items.DB_Sm===''?'报价':items.DB_Sm}}
            </div>
            <div class='number'>
              <span v-if="items.DB_Type=='付款'">￥{{items.DB_Price}}</span>
              <span v-else>赠品</span>
              <div class='number'>
                ×{{items.DB_ShuLiang}}{{items.SPDangWei}}
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <div
      class='pop-up'
      v-if='visible'
    >
      <form @submit="bindFormSubmit">
        <div class='content'>
          <div class='title'>取消说明</div>
          <div class='textarea-wrap'>
            <input type="text">

            <textarea
              placeholder="请输入说明"
              v-model="Remark"
              @input="input"
              name='Remark'
            />

            </div>
          <div class='btn-pop'>
            <button @click='visible=false'>取消</button>
 
            <button form-type="submit"> 提交 </button>
          </div>
        
        </div>
             </form>
    </div>
    <div class='stone'></div>
    <div class='footer'>
      <!-- <div class='point-out'>配送要求：A类桶装水累计起送量要求>=30</div> -->
      <div
        class='aggregate '
        :style="{justifyContent:'space-between',padding:'0 30rpx'}"
        :class="[store.isIphoneX?'iphoneX-fixed-bottom':'']"
      >
        <div style='padding-left:0'>合计:
          <span>￥{{productsTotal}}</span>
        </div>
        <div class='btn' @click='visible=true' v-if='detailData.OrderMain.DB_ZT==1'>取消订单</div>
      </div>
    </div>
  </div>
</template>
<script>
import { OrdersDetail, OrderCancel } from '@/api/api'
import defaultNone from '@/components/defaultNone'
export default {
  data () {
    return {
      detailData: null,
      productsTotal: 0,
      isShow: false,
      visible: false,
      Remark: '',
      form: {
        Remark: '',
        DB_INDEX: 0
      }
    }
  },

  components: {
    defaultNone
  },

  computed: {
    store () {
      return this.$store.state
    }
  },

  onShow () {
    this.getOrdersDetail()
  },

  methods: {
    async getOrdersDetail () {
      let id = this.$root.$mp.query.id

      let detailData = await OrdersDetail(id)
      if (detailData.OrderProducts.length) {
        let total = 0
        for (let key of detailData.OrderProducts) {
          total += key.DB_Money
        }
        this.productsTotal = total
      }
      this.detailData = detailData
    },
    btnAnClick () {
      this.isShow = !this.isShow
    },
    input (data) {
      console.log(data)
    },
    bindFormSubmit (e) {
      console.log(e)

      if (!e.mp.detail.value.Remark) {
        this.$wx.errToast('请输入说明')
        return
      }
      this.form.DB_INDEX = this.detailData.OrderMain.DB_INDEX
      this.form.Remark = e.mp.detail.value.Remark
      OrderCancel(this.form).then((res, status) => {
        if (res != '预约时间段错误') {
          this.visible = false
          this.getOrdersDetail()
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
@import '@/pages/chooseAnOffer/list.scss';
@import '@/common/scss/base.scss';
.order-info {
  background: #fff;
  padding: 20px 30px;
  > div {
    margin-bottom: 14px;
    @include color666;
    @include fontSize(28);
    span {
      @include color111;
      white-space: nowrap;
      display: inline-flex;
      align-self: flex-start;
    }
  }
  > div:last-child {
    margin: 0;
  }
}
.wuliu {
  @include fontSize(28);
  @include fjc(flex-start);

  background: #fff;
  > div {
    @include fjc;
    flex-grow: 1;
    .icon-qianjin {
      font-size: 28px;
      display: inline-block;
    }
    .top-t {
      transform: rotate(-90deg);
    }
    .bottom-t {
      transform: rotate(90deg);
    }
  }
}
.figure {
  background: #ffffff;
  position: relative;
  z-index: 10;
  padding: 97px 0 190px;
  li {
    padding-left: 53px;
    .i-wrap {
      width: 33px;
      @include fjc(center);
      flex-flow: row wrap;
      .post {
        @include wh(4, 130);
        background: #cccccc;
      }
      .basic-point {
        @include wh(32, 32);
        position: relative;
        border-radius: 100%;
        background: #cccccc;
        margin: 14px 0;
        .basic-point-info {
          @include ct;
          width: 600px;
          padding-left: 72px;
          > div {
            @include fontSize(28);
          }
          > div:last-child {
            margin-top: 10px;
            @include fontSize(26);
            @include color666;
          }
        }
      }
    }
  }
  .to-date {
    .basic-point {
      background: $primaryColor !important;
    }
    .basic-point-info {
      > div:first-child {
        color: $primaryColor;
      }
    }
  }
}
.goods-type {
  @include fontSize(28);
  @include color999;
}
.btn {
  width: 170px;
  height: 58px;
  @include fontSize(28);
  border-radius: 10px;
  @include fjc(center);
  color: #fff;
  background-color: $primaryColor;
}
.pop-up {
  position: fixed;
  top: 0;
  z-index: 100;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  @include fjc(center);
  .content {
    background: #fff;
    width: 540px;
    border-radius: 10px;
    overflow: hidden;
    .title {
      @include fontSize(28);
      color: #111;
      height: 88px;
      @include fjc(center);
    }
    .textarea-wrap {
      padding: 0 20px;
      textarea {
        border: 1px solid #ddd;
        width: 100%;
        padding: 10px;
        border-radius: 10px;
        box-sizing: border-box;
        @include fontSize(28);
      }
    }
    .btn-pop {
      display: flex;
      width: 100%;
      border-top: 1px solid #ddd;
      margin-top: 30px;

      > button {
        height: 88px;
        @include fjc(center);
        flex: 1;
        @include fontSize(28);
        border-radius: 0;
        &:nth-child(2) {
          background-color: $primaryColor;
          color: #fff;
        }
      }
    }
  }
}
</style>